
/* 普通注释  会保留到编译后的文件 */
// 静默注释  只保留在SASS源文件中，编译后被省略

@use "sass:math";

// 变量 
$defaultFontSize:14px;

$hot:#f10215;
$deepRed:#FF0033;
$warm:#FFCCCC;
$cool:#CCFFFF;
$cold:#66CCCC;
$success:#339999;
$gray:#CCCCCC;
$opaGray:rgba(0,0,0,0.4);
$lightGrey:#999;

$centerWidth:1226px;
$side:left;

@function pxToRem($val){
    // @return ($val/100px);
    // @return math.div($val,100px)*1rem;
    @return #{math.div($val,100px)}rem;
}



// 代码的复用 
// @mixin  可以重用的代码块。
// 提前将重复使用的代码 => 放到代码块中 => 起一个名字

// 如何使用@mixin ? 
// 使用@include命令，调用这个mixin。

// 和函数的区别?
// 函数=> 把完成特定功能的代码 抽离出来 => 使之成为一个独立的实体  (逻辑处理 返回值)

// @mixi => 返回代码段 


@mixin typeArea{
    width: $centerWidth;
    margin: 0 auto;
}

// mixin的强大之处，在于可以指定参数和缺省值。
@mixin PosCenter($type:1,$pos:absolute) {

    @if($type==1){
        position: $pos;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0 auto;

    }@else if($type==2){
        position: $pos;
        left: 50%;
        right:50%;
        transform: translate(-50%,-50%);
    }
}

@mixin compa($key,$val) {
    -ms-#{$key}: $val;
    -moz-#{$key}: $val;
    -webkit-#{$key}: $val;
    #{$key}: $val;
}